/**
 * @desc: 商品明细
 * @author: fj
 */
import React, { useState, useEffect } from 'react';
import { Button, Popover } from 'antd';
import CommonPlatImg from '@/components/CommonImg/PlatformComponent';
import CommonLoading from '@/components/CommonLoading';
import CommonModal from '@/components/CommonModal';
import CommonTable from '@/components/CommonTable';
import CommonZjfImg from '@/components/CommonImg/ZifComponent';
import CommonSysImg from '@/components/CommonImg/SysComponent';
import CommonTag from '@/components/CommonTag';
import { formatAmount } from '@/utils/utils.jsx';
import styles from './GoodsList.module.less';

const GoodsDetail = ({ visible, data, type, handleCancel }) => {

  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 60,
      render: (t, r, i) => i + 1,
    },
    {
      title: '网店/系统商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: '35%',
      render: (_, record) => {
        if (type == 1) {
          const obj = record.platformGoods;
          if (Object.keys(obj).length > 0) {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <CommonPlatImg
                  img={obj.ecGoodsImage}
                  style={{ marginRight: '8px' }}
                />
                <div
                  style={{ display: 'flex', flexDirection: 'column', flex: 1 }}
                >
                  <span>
                    {obj.ecGoodsName}
                    {obj.ecSkuName}
                  </span>
                  <span className="common-color9">
                    ¥{formatAmount(obj.ecGoodsPrice)}
                  </span>
                  <span>商品编码：{obj.outStoreSku}</span>
                  <span>
                    {(obj.deliverType == 1 || obj.deliverType == 2) && (
                      <CommonTag type="nahuo" />
                    )}
                    {obj.deliverType == 3 && <CommonTag type="zifa" />}
                    {obj.deliverType == 4 && <CommonTag type="cjzf" />}
                  </span>
                </div>
              </div>
            );
          }
          return null;
        } else {
          const obj = record.sysformGoods;
          if (Object.keys(obj).length > 0) {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <CommonSysImg
                  img={obj.goodsImage}
                  isCloudIcon={obj.isCarefullySelected}
                  storeId={obj.storeId}
                  style={{ marginRight: '8px' }}
                />
                <div
                  style={{ display: 'flex', flexDirection: 'column', flex: 1 }}
                >
                  <span>
                    {obj.goodsName}
                    {obj.skuName}
                  </span>
                  <span className="common-color9">
                    ¥{formatAmount(obj.goodsPrice)}
                  </span>
                  <span>商品编码：{obj.skuId}</span>
                  <span>
                    {(obj.deliverType == 1 || obj.deliverType == 2) && (
                      <CommonTag type="nahuo" />
                    )}
                    {obj.deliverType == 3 && <CommonTag type="zifa" />}
                    {obj.deliverType == 4 && <CommonTag type="cjzf" />}
                  </span>
                </div>
              </div>
            );
          }
          return null;
        }
      },
    },
    {
      title: '匹配状态',
      dataIndex: 'goodsImage',
      key: 'goodsImage',
      render: (_, record) => {
        if (type == 1) {
          if (
            record.platformGoods.matchType &&
            record.platformGoods.matchType > 0
          ) {
            return '已匹配 ';
          } else {
            return '未匹配';
          }
        } else {
          if (
            record.sysformGoods.matchType &&
            record.sysformGoods.matchType > 0
          ) {
            return '已匹配 ';
          } else {
            return '未匹配';
          }
        }
      },
    },
    {
      title: '供应商商品名称',
      dataIndex: 'matchingGoods',
      key: 'matchingGoods',
      width: '35%',
      render: (text) => {
        if (Object.keys(text).length > 0) {
          return (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <CommonZjfImg
                img={text.goodsImage}
                isCloudIcon={text.isCarefullySelected}
                storeId={text.storeId}
                style={{ marginRight: '8px' }}
              />
              <div
                style={{ display: 'flex', flexDirection: 'column', flex: 1 }}
              >
                <span>
                  {text.goodsName}
                  {text.goodsSpec}
                </span>
                <span className="common-color9">
                  ¥
                  {text.vipPrice
                    ? formatAmount(text.vipPrice)
                    : formatAmount(text.goodsPrice)}
                </span>
                <div style={{ display: 'flex' }}>
                  <span>商品编码：</span>
                  <span className="textOverflowMultiOne">{text.goodsId}</span>
                </div>
                <span>
                  {(text.deliverType == 1 || text.deliverType == 2) && (
                    <CommonTag type="nahuo" />
                  )}
                  {text.deliverType == 3 && <CommonTag type="zifa" />}
                  {text.deliverType == 4 && <CommonTag type="cjzf" />}
                </span>
              </div>
            </div>
          );
        }
        return null;
      },
    },
    {
      title: '供应商',
      dataIndex: 'storeName',
      key: 'storeName',
      render: (_, record) => {
        return (
          <span className="table-weight-text">
            {record.matchingGoods.storeName}
          </span>
        );
      },
    },
  ];

  const TableProps = {
    data,
    columns,
    scroll: { y: 705 },
  };

  const onCancel = () => {
    handleCancel();
  };
  return (
    <CommonModal
      title="商品明细"
      visible={visible}
      onCancel={onCancel}
      width="848px"
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
      ]}
    >
      <div className={`${styles.goodsTopic} ${styles.mb20}`}>
        <p>1.商品类型会优先读取商品渠道页面的商品类型</p>
        <p>
          2.组合里的商品明细,如果是“库存商品”则读取网店商品名称或系统商品名称,如果是“拿货商品”或“供应商直发商品”,则读取供应商商品名称
        </p>
      </div>
      <CommonTable {...TableProps} />
      <div className={styles.combinCount}>
        {type == '1'
          ? `供应商商品数: ${data.length}`
          : `系统商品数: ${data.length}`}
      </div>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default GoodsDetail;
